<?php
@session_start();
if (!empty($_SESSION['usuario'])) {
    
include_once '../../Model/M_Zona.php';
include_once '../../Model/M_Mesa.php';

$zona = new M_Zona();
$lstZona = $zona->ListarZonas_TODOS();

$mesa = new M_Mesa();


?>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../js/jquery-1.8.2.js"></script>
        <title></title>
        <style>
            html,body{
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
            .capaPrincipal{
                width: 100%;
                height: 100%;
            }
            .capaIzquierda{
                float: left;
                height: 100%;
                width: -moz-calc(100% - 100px); 
                width: -webkit-calc(100% - 100px); 
                width: calc(100% - 100px);
                font-weight: bold;
            }
            .capaDerecha{
                float: left;
                height: 100%;
                width: 100px;
                font-weight: bold;
            }
            .zona{
                margin: 10px;
                float: left;
                font-weight: bolder;
                width: -moz-calc(100% - 20px); 
                width: -webkit-calc(100% - 20px); 
                width: calc(100% - 20px); 
            }
            .zonaTitulo{
                height: auto;
                border-radius: 20px 20px 0px 0px;
                -webkit-box-shadow: 3px 3px 3px #A8A8A8;
                -moz-box-shadow: 3px 3px 3px #A8A8A8;
                width: 100%;
                padding: 2px;
                color: whitesmoke;
                font-size: 18px;
                font-family: sans-serif;
                text-shadow: 3px 3px 3px #aaa;
                background: rgb(197,222,234); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(197,222,234,1) 0%, rgba(138,187,215,1) 31%, rgba(6,109,171,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(197,222,234,1)), color-stop(31%,rgba(138,187,215,1)), color-stop(100%,rgba(6,109,171,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */

            }
            .zonaDetalle{
                float: left;
                padding: 5px;
                -webkit-box-shadow: 3px 3px 3px #A8A8A8;
                -moz-box-shadow: 3px 3px 3px #A8A8A8;
                width: -moz-calc(100% - 6px); 
                width: -webkit-calc(100% - 6px); 
                width: calc(100% - 6px);
                background: #e2e2e2;
                background: -moz-linear-gradient(-45deg,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe));
                background: -webkit-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: -o-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: -ms-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: linear-gradient(135deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 );
                
            }
            .mesa{
                width: 115px;
                height: auto;
                float: left;
                margin: 10px;
                border: 2px solid #919191;
                -webkit-box-shadow: 2px 2px 5px #919191;
                -moz-box-shadow: 2px 2px 5px #919191;
                text-decoration: none;
                background: #9dd53a;
                background: -moz-linear-gradient(-45deg,  #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a));
                background: -webkit-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
                background: -o-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
                background: -ms-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
                background: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=1 );
            }
            .mesaOcupada{
                width: 115px;
                height: auto;
                float: left;
                margin: 10px;
                border: 2px solid #919191;
                -webkit-box-shadow: 2px 2px 5px #919191;
                -moz-box-shadow: 2px 2px 5px #919191;
                text-decoration: none;
                background: #efc5ca;
                background: -moz-linear-gradient(-45deg,  #efc5ca 0%, #d24b5a 50%, #ba2737 51%, #f18e99 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#efc5ca), color-stop(50%,#d24b5a), color-stop(51%,#ba2737), color-stop(100%,#f18e99));
                background: -webkit-linear-gradient(-45deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                background: -o-linear-gradient(-45deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                background: -ms-linear-gradient(-45deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                background: linear-gradient(135deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efc5ca', endColorstr='#f18e99',GradientType=1 );
            }
            .mesaJuntando{
                border-radius: 10px 0px 0px 0px;                
                width: 115px;
                height: auto;
                float: left;
                margin: 10px;
                border: 2px solid #919191;
                -webkit-box-shadow: 2px 2px 5px #919191;
                -moz-box-shadow: 2px 2px 5px #919191;
                text-decoration: none;
                background: #fceabb;
                background: -moz-linear-gradient(-45deg,  #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93));
                background: -webkit-linear-gradient(-45deg,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
                background: -o-linear-gradient(-45deg,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
                background: -ms-linear-gradient(-45deg,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
                background: linear-gradient(135deg,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=1 );
            }
            .mesaTitulo{
                border-radius: 20px 20px 0px 0px;                
                text-shadow: 3px 3px 3px #aaa;
            }
            .mesaDetalle{                
                height: 24px;
                width: 100%;
                border: 1px solid #919191;
            }
            .mesaCantidadPersonas{
                float: left;
                width: 21px;
                height: 24px;
            }
            .mesaTotal{
                float: right;
                width: calc(100% - 24px);
                height: 24px;
                border-left: 2px solid #919191;
                
            }
            a{
                text-decoration: none;
                color: black;
            }
            .opciones{
                margin-bottom: 10px;
                margin-right: 10px;
                margin-top: 10px;
                height: 100%;
            }
            .opcionesTop{
                height: calc(100%-150px);
                float: left;
            }
            .opcionesBottom{
                height: 150px;
                float: left;
            }
            .iniciarPedido{
                background: #dfeffc url(css/redmond/images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
                -webkit-box-shadow: 2px 2px 2px #c5dbec;
                -moz-box-shadow: 2px 2px 2px #c5dbec;
                border: 1px solid #c5dbec;
                height: 60px;
                width: 100%;
                font-weight: bold;
                color: #2e6e9e;
                cursor: pointer;
                font-size: 20px;
                margin-top: 10px;
            }
            .iniciarPedido:hover{
                border: 1px solid #79b7e7;
                background: #d0e5f5 url(css/redmond/images/ui-bg_glass_75_d0e5f5_1x400.png) 50% 50% repeat-x;
                font-weight: bold;
                color: #1d5987;
                -webkit-box-shadow: 4px 4px 4px #c5dbec;
                -moz-box-shadow: 4px 4px 4px #c5dbec;
                height: 60px;
                width: 100%;
                cursor: pointer;
                font-weight: bold;
                color: #2e6e9e;
                cursor: pointer;
                font-size: 20px;
                margin-top: 10px;
            }
            .iniciarPedidoDisable{
                height: 60px;
                font-weight: bolder;
                font-size: 20px;
                -webkit-box-shadow: 2px 2px 2px #999;
                -moz-box-shadow: 2px 2px 2px #999;
                color: #727272;
                text-shadow: 3px 3px 3px #aaa;
                background: #fcfff4;
                background: -moz-linear-gradient(-45deg,  #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fcfff4), color-stop(40%,#dfe5d7), color-stop(100%,#b3bead));
                background: -webkit-linear-gradient(-45deg,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
                background: -o-linear-gradient(-45deg,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
                background: -ms-linear-gradient(-45deg,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
                background: linear-gradient(135deg,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=1 );
                cursor: default;
                border-width: 4px;
                width: 100%;
                margin-top: 10px;
            }
            .leyendaMesaJuntando{
                background: -moz-linear-gradient(-45deg,  #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93));
                background: -webkit-linear-gradient(-45deg,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
                background: -o-linear-gradient(-45deg,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
                background: -ms-linear-gradient(-45deg,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
                background: linear-gradient(135deg,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=1 );
                -webkit-box-shadow: 2px 2px 2px #999;
                -moz-box-shadow: 2px 2px 2px #999;
                border-width: 4px;
                height: 60px;
                top: 150px;
                width: 100%;
                margin-top: 10px;
            }
            .leyendaMesaLibre{
                background: #9dd53a;
                background: -moz-linear-gradient(-45deg,  #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a));
                background: -webkit-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
                background: -o-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
                background: -ms-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
                background: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=1 );
                -webkit-box-shadow: 2px 2px 2px #999;
                -moz-box-shadow: 2px 2px 2px #999;
                border-width: 4px;
                height: 60px;
                width: 100%;
                margin-top: 10px;
            }
            .leyendaMesaOcupada{
                background: #efc5ca;
                background: -moz-linear-gradient(-45deg,  #efc5ca 0%, #d24b5a 50%, #ba2737 51%, #f18e99 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#efc5ca), color-stop(50%,#d24b5a), color-stop(51%,#ba2737), color-stop(100%,#f18e99));
                background: -webkit-linear-gradient(-45deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                background: -o-linear-gradient(-45deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                background: -ms-linear-gradient(-45deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                background: linear-gradient(135deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efc5ca', endColorstr='#f18e99',GradientType=1 );
                -webkit-box-shadow: 2px 2px 2px #999;
                -moz-box-shadow: 2px 2px 2px #999;
                border-width: 4px;
                height: 60px;
                width: 100%;
                margin-top: 10px;
                cursor: pointer;
            }

        </style>
        <script>
            function eligeFuncionalidad(id){
                var elemento = document.getElementById(id);
                if(elemento.className=="mesaOcupada"){
                    location.href='V_Pedido.php';                    
                }else if(elemento.className=="mesaJuntando"){
                    elemento.className = "mesa";
                    $('#row'+id).remove();
                }
                else{
                    document.getElementById("btnIniciarPedido").disabled=false;
                    document.getElementById("btnIniciarPedido").className="iniciarPedido";
                    elemento.className = "mesaJuntando";
                    
                    //alert(x[i].value);
                    $('#grilla > tbody:last').append('<tr id="row'+id+'"><td><input type="hidden" name="id_m[]" value="'+id+'" /></td></tr>');


                }
                var elemArray = document.getElementsByClassName("mesaJuntando");
                if(elemArray.length == 0)
                {
                    document.getElementById("btnIniciarPedido").disabled=true;
                    document.getElementById("btnIniciarPedido").className="iniciarPedidoDisable";
                }        
            }
            function eliminardatos(dato) {
                $(dato).parent().parent().remove();
            }
        </script>
        <script>
            $(function() {
                var offset = $("#sidebar").offset();
                var topPadding = 10;
                $(window).scroll(function() {
                    if ($("#sidebar").height() < $(window).height() && $(window).scrollTop() > offset.top) { 
                        $("#sidebar").stop().animate({
                            marginTop: $(window).scrollTop() - offset.top + topPadding
                        });
                    } else {
                        $("#sidebar").stop().animate({
                            marginTop: 0
                        });
                    };
                });
            });
        </script>
    </head>
    <body>
        <form name="form" action="#" method="post" >
            <div align="center" class="capaPrincipal">
                <div style="background-color: black; height: 70px; ">
                <div style="float: left; padding-left: 10px; margin-top: 5px;">
                    <img src="../images/mozos.jpg" height="60px" /> <label style="color: white; font-weight: bolder; vertical-align: middle;">ZONA DE PEDIDOS</label>
                </div>
                <div style="float: right">
                    <label style="color: white; font-weight: bolder; vertical-align: middle; padding-top: 10px; padding-right: 5px;">Mozo: <?=$_SESSION['nombreMozo']?></label><br/>
                    <label style="color: white; font-weight: bolder; vertical-align: middle; padding-top: 10px; padding-right: 5px;">Cerrar Sesion</label>
                </div>
            </div>
                
                <div class="capaIzquierda">
                    
                    <? for($i=0; $i<count($lstZona); $i++){ 
                        $idzona = $lstZona[$i]['id_zona'];                    
                        $nombre = $lstZona[$i]['nombre'];

                        $mesa->setID_Zona($idzona);
                        $lstMesa = $mesa->searchMesasxZona_All();
                        if (count($lstMesa) > 0){
                     ?>   

                    <div class="zona">
                        <input type="hidden" name="idzona" value="<?=$idzona?>" />
                        <div class="zonaTitulo"><?= $nombre ?></div>
                        <div class="zonaDetalle">
                            <? for($j=0; $j<count($lstMesa); $j++){
                                $m_nombre = $lstMesa[$j]['nombre'];
                                $m_idmesa = $lstMesa[$j]['id_mesa'];
                                $m_cap    = $lstMesa[$j]['capacidad'];

                                if($lstMesa[$j]['estado'] == 't'){
                                    $estado[$j] = 'mesaOcupada';                                 
                                }else
                                    { $estado[$j] = 'mesa';}
                                ?>
                            <a href="#">
                                <div id="<?=$lstMesa[$j]['id_mesa']?>" class="<?=$estado[$j];?>" onclick="eligeFuncionalidad(id)">
                                    <div class="mesaTitulo">
                                        <img src="../images/Pedido/table.png" width="20" height="20" />
                                        <?=$m_nombre;?>
                                    </div>
                                    <div class="mesaDetalle">
                                        <div class="mesaCantidadPersonas"><?=$m_cap?></div>
                                        <div class="mesaTotal"></div>
                                    </div>
                                </div>
                            </a>
                            <?}?>                                                
                        </div>
                    </div>
                    <? }else{}
                    }?>                                              
                </div>
                <div class="capaDerecha" id="sidebar">
                    <table id="grilla"  border="0" align="center" hidden="">
                        <thead >
                            <tr>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    <div class="opciones">
                        <div class="opcionesTop">
                            <button id="btnIniciarPedido" class="iniciarPedidoDisable" disabled="" onclick = "this.form.action = '../../Controller/C_Pedido_Iniciar.php'"/>Inciar Pedido</button>
                            <button id="leyendaMesaJuntando" class="iniciarPedido" onclick = "this.form.action = 'V_Mosos.php'">Asignar Moso</button>
                            <button id="leyendaMesaOcupada" class="iniciarPedido" onclick = "this.form.action = '../../Controller/C_Logout.php'">SALIR</button>
                            <button id="leyendaMesaLibre" class="leyendaMesaLibre" disabled="">Mesa Libre</button>
                        </div>
                        <div class="opcionesBottom">
                            <button id="leyendaMesaOcupada" class="leyendaMesaOcupada" disabled="">Mesa Ocupada</button>
                            <button id="leyendaMesaJuntando" class="leyendaMesaJuntando" disabled="">Mesa Por Juntar</button>
                        </div>
                    </div>
                </div>  
            </div>
        </form>
<?php
    } else {
    ?>
    <script language="JavaScript" type="text/javascript">
        alert('Su session a expirado, por favor Ingrese Nuevamente');
        location.href = '../V_Login.php';
    </script>
    <?php } ?>
    </body>      
</html>
